<template>
  <div>
    <div class="top flexBetweenCenter">
      <div>
        <a-button icon="left" class="rigntMargin" @click="leftMonth" />
        <span class="monthPicker">
          <a-month-picker v-model="monthTime" format="YYYY年MM月" class="rigntMargin" />

          <a-button icon="right" class="rigntMargin" @click="rightMonth" />
        </span>

        <!-- <a-select
          label-in-value
          :default-value="defaultData"
          @change="handleChange"
          style="width:200px;margin-right:10px"
        >
          <a-select-option
            v-for="(item,index) in teamGroup "
            :key="index"
            :value="item.key"
          >{{item.lable}}</a-select-option>
        </a-select>-->
        <a-select
          :default-value="defaultData"
          style="width: 200px;margin-right:20px"
          @change="handleChange"
        >
          <a-select-opt-group :label="item.label" v-for="(item,index) in teamGroup" :key="index">
            <a-select-option
              v-for="(data,index) in item.children "
              :key="index"
              :value="data.lable"
            >{{data.lable}}</a-select-option>
          </a-select-opt-group>
        </a-select>
        <!-- <a-cascader
            :options="options"
            :display-render="displayRender"
            expand-trigger="hover"
            placeholder="Please select"
            :default-value="['江苏路通建筑劳务有限公司', '下构一队', '钢筋班']"
            @change="onChange"
            style="margin-right:10px"
        />-->

        <a-button style="font-size:16px" class="rigntMargin">
          <span style="display:inline-block;hight:32px"></span>导出
        </a-button>
      </div>
      <div>
        <a-input-search placeholder="请输入姓名" style="width: 300px" @search="onSearch" />
      </div>
    </div>
    <div class="atable">
      <a-table :data-source="data" :scroll="{ x: 600}">
        <a-table-column key="month" title="月份" data-index="month" width="150px" align="center" />
        <a-table-column key="name" title="姓名" data-index="name" width="150px" align="center">
          <template slot-scope="text">
            <a>{{text}}</a>
          </template>
        </a-table-column>
        <a-table-column key="post" title="岗位" data-index="post" width="150px" align="center" />
        <a-table-column key="days" title="出勤天数" data-index="days" width="120px" align="center" />
        <a-table-column
          :key="index.toString()"
          :data-index="index.toString()"
          v-for="index in 30"
          width="100px"
          align="center"
        >
          <span slot="title" :class="{ restDay: (index%7==0)||(index%7==6) }">{{index}}</span>
          <template slot-scope="text">
            <img :src="kaoqin2" alt v-if="text" />
            <img :src="kaoqin1" alt v-else />
          </template>
        </a-table-column>
      </a-table>
    </div>
    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共{{total}} 条记录 第 {{current}} / {{Math.ceil((total/pageSize))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          :pinspector-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
            <span v-if="props.value === '40'">全部</span>
          </template>
        </a-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import kaoqin1 from '@/assets/img/kaoqin11.png'
import kaoqin2 from '@/assets/img/kaoqin2.png'
const data = [
  {
    key: '1',
    month: '2020年3月',
    name: '王志',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  },
  {
    key: '2',
    month: '2020年3月',
    name: '潘海涛',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  },
  {
    key: '3',
    month: '2020年3月',
    name: '王权',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  },
  {
    key: '4',
    month: '2020年3月',
    name: '李海',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  },
  {
    key: '5',
    month: '2020年3月',
    name: '李志同',
    post: '普工',
    days: '23',
    '1': false,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': false,
    '7': false,
    '8': true,
    '9': true,
    '10': true,
    '11': true,
    '12': true,
    '13': false,
    '14': false,
    '15': true,
    '16': true,
    '17': true,
    '18': true,
    '19': true,
    '20': false,
    '21': false,
    '22': true,
    '23': true,
    '24': true,
    '25': true,
    '26': true,
    '27': false,
    '28': false,
    '29': true,
    '30': true
  }
]
const options = [
  {
    value: '江苏路通建筑劳务有限公司',
    label: '江苏路通建筑劳务有限公司',
    children: [
      {
        value: '下构一队',
        label: '下构一队',
        children: [
          {
            value: '钢筋班',
            label: '钢筋班'
          }
        ]
      }
    ]
  },
  {
    value: '南京仁泰基础工程有限公司',
    label: '南京仁泰基础工程有限公司',
    children: [
      {
        value: '路基施工一队',
        label: '路基施工一队',
        children: [
          {
            value: '混凝土班组',
            label: '混凝土班组'
          }
        ]
      }
    ]
  }
]
export default {
  data() {
    return {
      monthTime: moment(new Date(), 'YYYY年MM月'),
      data,
      kaoqin1,
      kaoqin2,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      defaultData: '钢筋班',
      teamGroup: [
        {
          label: '江苏路通建筑劳务有限公司',
          children: [
            {
              key: 'gj',
              lable: '钢筋班'
            },
            {
              key: 'mg',
              lable: '木工班'
            }
          ]
        },
        {
          label: '南京仁泰基础工程有限公司',
          children: [
            {
              key: 'gj',
              lable: '钢筋班'
            },
            {
              key: 'mg',
              lable: '木工班'
            }
          ]
        }
      ],
      options
    }
  },
  mounted() {
    // console.log(this.monthTime)
  },
  methods: {
    moment,
    onChange(value) {
      console.log(value)
    },
    displayRender({ labels }) {
      return labels[labels.length - 1]
    },
    onSearch(value) {
      console.log(value)
    },
    leftMonth() {
      this.monthTime = moment(this.getLastMonth(this.monthTime._d), 'YYYY年MM月')
    },
    rightMonth() {
      this.monthTime = moment(this.getNextMonth(this.monthTime._d), 'YYYY年MM月')
    },
    getLastMonth(date) {
      //获取上个月日期
      var year = date.getFullYear()
      var month = date.getMonth()
      if (month == 0) {
        year = year - 1
        month = 12
      }
      return year + '年' + month + '月'
    },
    getNextMonth(date) {
      var year = date.getFullYear()
      var month = date.getMonth() + 2
      if (month == 13) {
        year = year + 1
        month = 1
      }
      return year + '年' + month + '月'
    },
    handleChange(value) {
      //   console.log(value)
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      // this.current = 1
      // this.pageSize = pageSize
      // this.getTable()
    },
    pageChange(current, pageSize) {
      // this.current = current
      // this.pageSize = pageSize
      // this.getTable()
    }
  }
}
</script>

<style scoped>
::v-deep .ant-calendar-picker-icon {
  display: none;
}
::v-deep .ant-calendar-picker-clear {
  display: none;
}

.monthPicker ::v-deep .ant-calendar-picker-input.ant-input {
  line-height: 1.5;
  background: #1890ff;
  text-align: center;
  color: #fff;
  width: 120px;
  border: 1px solid #1890ff;
  cursor: pointer;
}
.rigntMargin {
  margin-right: 20px;
}
.restDay {
  color: #ff9933;
}
.top {
  padding-top:30px ;
  margin-bottom: 30px;
}
.atable {
  margin-bottom: 20px;
}
</style>